/* eslint-disable max-len */
import React from 'react';
import ReactSlider from 'react-slick';

import adv_slide_1 from '@/assets/images/profile/adv_slide_1.png';
import adv_slide_mobile_1 from '@/assets/images/profile/adv_slide_mobile_1.png';
import { ReactComponent as Arrow } from '@/assets/images/profile/Arrow.svg';
import { innerUrls } from '@/shared/constants';
import { ModalContext } from '@/shared/context/ModalContext';
import { Modals } from '@/shared/interfaces';
import { useAppSelector } from '@/shared/store';
import { Button, ButtonVariants, Title } from '@/shared/ui';
import { ModalPage } from '@/widgets/ModalPage';
import Image from 'next/image';
import { useWindowSize } from 'usehooks-ts';

import { getUserProfile } from '../../model/selectors';
import ccs from '../Subscription/Subscription.module.scss';
import cs from './Advantages.module.scss';

const mock = [
  {
    title: 'Добавляйте продукты',
    text: 'Контролируйте план прикорма и добавляйте  новые продукты в меню, просто выбрав из списка',
    img: adv_slide_1,
    mobile: adv_slide_mobile_1,
  },
  {
    title: 'Управляйте что-то там',
    text: 'Контролируйте и добавляйте продукты в меню',
    img: adv_slide_1,
    mobile: adv_slide_mobile_1,
  },
];

export const AdvantagesModal = () => {
  const { width } = useWindowSize();
  const { closeModal, data, openModal, setData } = React.useContext(ModalContext);
  const [slideIndex, setSlideIndex] = React.useState(0);
  const { isPremium } = useAppSelector(getUserProfile);
  let sliderRef = React.useRef(null);
  const content = () => (
    <div className={cs.slider}>
      <ReactSlider
        adaptiveHeight={false}
        arrows={false}
        beforeChange={(current, next) => setSlideIndex(next)}
        dots
        dotsClass={cs.dots}
        infinite
        ref={(slider) => {
          // @ts-ignore
          sliderRef = slider;
        }}
      >
        {mock.map(({ title, text, img, mobile }, index) => (
          // eslint-disable-next-line react/no-array-index-key
          <div className={cs.container} key={index}>
            {width > 1024 ? (
              <Image
                alt="page"
                className={cs.cover}
                height={417}
                placeholder="blur"
                priority
                quality={100}
                sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, (max-width: 1366px) 33vw, 33vw"
                src={img}
              />
            ) : (
              <Image
                alt="page"
                className={cs.cover}
                placeholder="blur"
                priority
                quality={100}
                sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, (max-width: 1366px) 33vw, 33vw"
                src={mobile}
              />
            )}
            <section>
              <Title size="l">{title}</Title>
              <Title size="xs">{text}</Title>
            </section>
          </div>
        ))}
      </ReactSlider>
      {!isPremium && (
        <div className={ccs.buy_block}>
          <Button className={ccs.btn} variant={ButtonVariants.Green}>
            Купить за 399 ₽/год
          </Button>
          <p className={ccs.agree}>
            Соглашаюсь{' '}
            <Button href={innerUrls.agreement} link target="_blank" variant={ButtonVariants.Link}>
              с политикой персональных данных
            </Button>
          </p>
        </div>
      )}
    </div>
  );

  const returnTo = React.useCallback(() => {
    openModal(data?.id as Modals);
    setData(() => null);
  }, [data?.id]);

  return (
    <ModalPage
      className={cs.modal}
      containerClassName={cs.container_class}
      handleClose={data && data?.id ? returnTo : closeModal}
      handleGoBack={data && data?.id && returnTo}
      isOpen
      withGoBack={data && data?.id}
      zIndex={1000}
    >
      {width > 1024 && (
        <>
          {/* @ts-ignore */}
          <Arrow className={cs.arrow} onClick={() => sliderRef && sliderRef?.slickGoTo(slideIndex - 1)} />
          {/* @ts-ignore */}
          <Arrow className={cs.arrow_reverse} onClick={() => sliderRef && sliderRef?.slickGoTo(slideIndex + 1)} />
        </>
      )}
      {content()}
    </ModalPage>
  );
};
